class MyCanvas {
  canvas = null
  ctx = null
  gridArray = []
  gridWidth = 10
  initCanvas(canvasId) {
    this.canvas = document.querySelector(`#${canvasId}`)
    this.canvas.width = window.innerWidth
    this.canvas.height = window.innerHeight
    this.ctx = canvas.getContext('2d')
  }
  setGridWidth(gridWidth) {
    this.gridWidth = gridWidth
  }
  initGrid() {
    let widthLength = window.innerWidth / this.gridWidth
    let heightLength = window.innerHeight / this.gridWidth
    this.gridArray = []
    for (let i = 0; i < widthLength; i++) {
      this.gridArray.push([])
      for (let j = 0; j < heightLength; j++) {
        const point = [j * this.gridWidth, i * this.gridWidth]
        this.gridArray[i].push(point)
      }
    }
  }
  drawGrid() {
    this.gridArray.forEach(row => {
      row.forEach(col => {
        this.ctx.strokeRect(col[0], col[1], this.gridWidth, this.gridWidth);
      })
    })
  }

  drawPointArray(array, radiu, color) {
    array.forEach(p => {
      this.ctx.beginPath()
      this.ctx.fillStyle = color
      this.ctx.arc(p.x, p.y, radiu, 0, 2 * Math.PI)
      this.ctx.fill()
      this.ctx.closePath()
    })
  }

  drawRect(x, y, width, height, color) {
    this.ctx.strokeRect(x, y, width, height)
    if (color) {
      this.ctx.fillStyle = color
      this.ctx.fillRect(x, y, width, height)
    }
  }

  clearScreen(width, height) {
    this.ctx.clearRect(0, 0, width, height)
  }
}

export default MyCanvas